<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body { 
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        canvas { 
            width: 100vw; 
            height: 100vh;
            display: block;
        }
        #controls {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 20px;
            border-radius: 10px;
            z-index: 1000;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px 0;
        }
        button:hover {
            background: #45a049;
        }
        .stat {
            margin: 10px 0;
            font-size: 14px;
        }
        .intro-btn {
            background: #2196F3;
            margin-top: 10px;
            width: 100%;
        }
        .intro-btn:hover {
            background: #1976D2;
        }
        .difficulty-controls {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 5px;
        }
        .maze-btn {
            width: calc(25% - 4px);
            background: #424242;
            font-size: 12px;
            padding: 5px 10px;
            margin: 2px;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .maze-btn:hover:not(.active) {
            background: #616161;
            transform: translateY(-2px);
        }
        .maze-btn.active {
            background: #FF9800;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(255,165,0,0.3);
            font-weight: bold;
        }
        .maze-btn:active {
            transform: scale(0.95);
        }
        h4 {
            margin: 0 0 10px 0;
            font-size: 14px;
        }
        .game-controls {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 5px;
        }
        .control-btn {
            width: 32%;
            margin: 0 1%;
        }
        .start { background: #4CAF50; }
        .pause { background: #FFC107; }
        .end { background: #F44336; }
        #gameCanvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 2px solid #333;
            background: #000;
        }
        .speed-controls {
            margin-top: 10px;
            padding: 5px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }
        .speed-label {
            font-size: 12px;
            margin-top: 5px;
            text-align: center;
        }
        #speedSlider {
            width: 100%;
            margin: 10px 0;
        }
        .panel-toggle {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1001;
            background: rgba(0,0,0,0.8);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 20px;
        }
        .panel-toggle:hover {
            background: rgba(0,0,0,0.9);
        }
        #controls {
            transition: transform 0.3s ease;
        }
        #controls.hidden {
            transform: translateX(110%);
        }
        .food-info {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 5px;
            background: rgba(0,0,0,0.3);
        }
        .food-type {
            margin: 8px 0;
            font-size: 14px;
        }
        .food-icon {
            font-size: 18px;
            margin-right: 8px;
        }
        .effect-list {
            margin: 5px 0 5px 25px;
            padding-left: 0;
            list-style-type: none;
            font-size: 12px;
            color: #ccc;
        }
        .effect-list li {
            margin: 3px 0;
        }
    </style>
</head>
<body>
    <button id="togglePanel" class="panel-toggle">
        <span class="toggle-icon">☰</span>
    </button>
    <div id="controls">
        <h3>算法妈妈蛇年贪吃蛇 2025</h3>
        <div class="game-controls">
            <h4>游戏控制</h4>
            <button onclick="startGame()" class="control-btn start">Game Start</button>
            <button onclick="togglePause()" class="control-btn pause" id="pauseBtn">Game Pause</button>
            <button onclick="endGame()" class="control-btn end">Game End</button>
            <button onclick="toggleAI()" class="control-btn ai">Enable AI Copilot</button>
            <div class="speed-controls">
                <h4>蛇速</h4>
                <input type="range" id="speedSlider" min="100" max="500" value="300" step="50"
                       onchange="updateSpeed(this.value)">
                <div class="speed-label">耗时/格: <span id="speedValue">300</span>ms</div>
            </div>
        </div>
        <div class="difficulty-controls">
            <h4>迷宫大小</h4>
            <button onclick="setMazeSize('small')" class="maze-btn active">小型</button>
            <button onclick="setMazeSize('medium')" class="maze-btn">中型</button>
            <button onclick="setMazeSize('large')" class="maze-btn">大型</button>
            <button onclick="setMazeSize('ultra')" class="maze-btn">超大</button>
        </div>
        <button onclick="resetGame()">重置游戏环境</button>
        <button onclick="showCompanyIntro()" class="intro-btn">Game Developer Info</button>
        <div class="stat">当前得分： <span id="score">0</span></div>
        <div class="stat">当前能量： <span id="energy">100</span></div>
        <div class="stat">当前迷宫选择： <span id="maze-size">Small</span></div>
        <div class="stat">当前状态： <span id="status">Ready to start</span></div>
        <div class="game-info">
            <h4>游戏说明</h4>
            <div class="food-info">
                <div class="food-type">
                    <span class="food-icon">🍎</span> 苹果:
                    <ul class="effect-list">
                        <li>能量 +25</li>
                        <li>分数 +10</li>
                        <li>长度 +1</li>
                    </ul>
                </div>
                <div class="food-type">
                    <span class="food-icon">☠️</span> 毒物:
                    <ul class="effect-list">
                        <li>能量 -15</li>
                        <li>分数 -5</li>
                        <li>长度不变</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <canvas id="gameCanvas"></canvas>
    <script src="/static/test.js"></script>
    <script src="/static/game.js"></script>
</body>
</html> 